<template>
    <div class="dynamicIssue">
        <el-form ref="dynamicStateFrom" :model="dynamicStateFrom" :rules="dynamicStateRules" label-width="20%">
            <el-form-item>
                正文
                <div class="defaultStick">
                    <el-checkbox  v-model="dynamicStateFrom.matterStick" label="置顶动态" border true-label="1" false-label="0"></el-checkbox >
                </div>
            </el-form-item>
            <el-form-item>
                <div class="defaultRadio" style="margin-bottom: 0">
                    <el-radio v-model="dynamicStateFrom.matterLabel" label="1" border>不选择如何标签</el-radio>
                    <el-radio v-model="dynamicStateFrom.matterLabel" label="2" border>Bug反馈</el-radio>
                    <el-radio v-model="dynamicStateFrom.matterLabel" label="3" border>功能与内容</el-radio>
                    <el-radio v-model="dynamicStateFrom.matterLabel" label="4" border>学习交流</el-radio>
                </div>
            </el-form-item>
            <el-form-item prop="defaultText">
                <el-input v-model="dynamicStateFrom.defaultText" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 6, maxRows: 12}"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="defaultRadio">
                    <el-radio v-model="dynamicStateFrom.defaultMatterType" label="1" border>图片</el-radio>
                    <el-radio v-model="dynamicStateFrom.defaultMatterType" label="2" border>视频</el-radio>
                </div>
                <!-- 图片 -->
                <div class="defaultUpload" v-if="dynamicStateFrom.defaultMatterType === '1'">
                    <span style="color: #ee3a29">最多9张图片</span>
                    <div class="uploadBox">
                        <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                        <div class="uploadCell">
                            <input class="uploadInput" type="file" name="image" multiple ref="imageDefault" accept="image/*" @change="optionUploadMultimediaFile($event, '1', 0)"/>
                        </div>
                    </div>
                    <div class="exhibitionBox">
                        <draggable v-model="dynamicStateFrom.defaultImages" :options="dragOptions">
                            <transition-group tag="div" id="defaultImage" class="item-defaultImage">
                                <div class="exhibitionCell" v-for="(itemDefaultImage, indexDefaultImage) in dynamicStateFrom.defaultImages" :key="'defaultImage'+indexDefaultImage">
                                    <img :src="itemDefaultImage">
                                    <div class="exhibitionDelete" @click.stop.prevent="operateDeleteMultimedia(dynamicStateFrom.defaultImages, indexDefaultImage)">
                                        <el-button type="danger" icon="el-icon-delete" circle size="mini" plain></el-button>
                                    </div>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </div>
                <!-- 视频 -->
                <div class="defaultUpload" v-if="dynamicStateFrom.defaultMatterType === '2'">
                    <span style="color: #ee3a29">只可1个视频</span>
                    <div class="uploadBox">
                        <el-button round>上传视频<i class="el-icon-upload el-icon--right"></i></el-button>
                        <div class="uploadCell">
                            <input class="uploadInput" type="file" name="video" ref="videoDefault" accept="video/*" @change="optionUploadMultimediaFile($event, '2', 0)"/>
                        </div>
                    </div>
                    <div class="exhibitionBox">
                        <div class="exhibitionCell" v-for="(itemDefaultVideo, indexDefaultVideo) in dynamicStateFrom.defaultVideos" :key="'defaultVideo'+indexDefaultVideo">
                            <div class="exhibitionCellCover">
                                <img :src="itemDefaultVideo.cover" v-if="itemDefaultVideo.cover && indexDefaultVideo === 0">
                            </div>
                            <video :src="itemDefaultVideo.url" controls v-if="indexDefaultVideo === 0"></video>
                            <div class="exhibitionDelete">
                                <el-button type="primary" icon="el-icon-picture" circle size="mini" plain></el-button>
                                <div class="uploadCell">
                                    <input type="file" name="image" ref="defaultCover" accept="image/*" @change="optionUploadMultimediaFile($event, '6', indexDefaultVideo)"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="userId">
                <el-select v-model="dynamicStateFrom.userId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="'user'+index"
                        :label="item.nick_name"
                        :value="item.user_id">
                        <span style="float: left;width: 30px;height: 30px;border-radius: 50%;">
                            <img :src="item.avatar_url" width="100%" height="100%">
                        </span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nick_name || '暂无数据' }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer dialogFooter">
            <el-button type="primary" @click.stop.prevent="operatePublishTemplate('dynamicStateFrom')">发 布 动 态</el-button>
        </span>
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'
// 拖拽
import draggable from 'vuedraggable'
import { upLoadFileToOSS } from '@/config/utils'
import { acquireUserMessage, appendVoteToGather } from '@/config/api'
export default {
    name: 'dynamicIssue',
    components: {
        draggable,
    },
    data () {
        return {
            // 用户列表
            userList: [],
            // 动态表单
            dynamicStateFrom: {
                // 用户唯一凭证
                unionId: '',
                // 用户id
                userId: '',
                // 动态类型  1投票 2推荐 3反馈 4交流
                matterType: '3',
                // 动态标签  1不选择如何标签 2Bug反馈 3功能与内容 4学习交流
                matterLabel: '1',
                // 内容置顶 1置顶 0不置顶
                matterStick: '0',
                // 内容采纳 1采纳 0不采纳
                matterAdopt: '0',
                // 投票类型  1普通动态  2投票动态
                voteType: '1',
                // 默认文本
                defaultText: '',
                // 默认视频
                defaultVideos: [],
                // 默认图片
                defaultImages: [],
                // 默认动态类型 0纯文本 1图片 2视频
                defaultMatterType: '0',
                // // 投票标题
                // voteTitle: '',
                // // 投票说明
                // voteExplain: '',
                // // 投票截止时间
                // voteAbort: '',
                // // 投票内容id列表
                // voteMatterList: [],
                // // 投票动态类型  1文本 2图文 3视文
                // voteMatterType: '0',
                // // 文本 选项
                // plainTextOption: [],
                // // 图文 选项
                // imageTextOption: [],
                // // 视文 选项
                // videoTextOption: [],
                // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
                uploadType: '0',
                // // 发布时间
                // createTime: '',
                // // 评论数
                // forumComment: 0,
                // // 点赞数
                // forumPraise: 0,
                // // 分享数
                // forumShare: 0,
                // // 投票数
                // forumVote: 0
            },
            dynamicStateRules: {
                userId: [
                    { required: true, message: '请选择用户', trigger: 'change'}
                ],
                // defaultText: [
                //     { required: true, message: '请输入文本内容', trigger: 'blur' },
                // ],
                // voteTitle: [
                //     { required: true, message: '请输入标题', trigger: 'blur' },
                // ],
                // voteExplain: [
                //     { required: true, message: '请输入说明', trigger: 'blur' },
                // ],
                // voteAbort: [
                //     { type: 'date', required: true, message: '请选择截止时间', trigger: 'change' }
                // ]
            },

            // 拖拽配置
            dragOptions: {
                animation: 120,
                scroll: true,
                group: 'sortlist',
                ghostClass: 'ghost-style'
            },
        }
    },
    // watch: {
    //   // 深度监听
    //   matterId: {
    //     handler(val){
    //       const self = this;
    //       // 初始化 动态详情界面
    //       self.initDynamicDetailsInterface()
    //     },
    //     deep:true
    //   },
    // },
    mounted (){
        const self = this;
        // 初始化 动态发布界面
        self.initDynamicIssueInterface()
    },
    methods: {
        // 初始化 动态详情界面
        initDynamicIssueInterface() {
            const self = this;
            // 获取 超级用户信息
            self.obtainSuperUserInformation()
        },
        // 动态表单模板
        initVoteTemplate() {
            const self = this;
            // 用户唯一凭证
            self.dynamicStateFrom.unionId = ''
            // 用户id
            self.dynamicStateFrom.userId = ''
            // 动态类型  1投票 2推荐 3反馈 4交流
            self.dynamicStateFrom.matterType = '3'
            // 动态标签  1不选择如何标签 2Bug反馈 3功能与内容 4学习交流
            self.dynamicStateFrom.matterLabel = '1'
            // 内容置顶 1置顶 0不置顶
            self.dynamicStateFrom.matterStick = '0'
            // 内容采纳 1采纳 0不采纳
            self.dynamicStateFrom.matterAdopt = '0'
            // 投票类型  1普通动态  2投票动态
            self.dynamicStateFrom.voteType = '1'
            // 默认文本
            self.dynamicStateFrom.defaultText = ''
            // 默认视频
            self.dynamicStateFrom.defaultVideos = []
            // 默认图片
            self.dynamicStateFrom.defaultImages = []
            // 默认动态类型  1图片 2视频
            self.dynamicStateFrom.defaultMatterType = '0'
            // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
            self.dynamicStateFrom.uploadType = '0'
        },
        // 获取 超级用户信息
        async obtainSuperUserInformation() {
            const self = this;
            // 获取用户信息
            const userInfo = await acquireUserMessage()
            if (userInfo.status === 200) {
                // 用户列表
                self.userList = userInfo.data
                self.dynamicStateFrom.userId = ''
                console.log(userInfo, '......userInfo')
            }
        },

        // 选择欲上传的多媒体文件
        async optionUploadMultimediaFile(event, status, index) {
            const self = this;
            // 浏览器兼容 (FF不兼容event.srcElement)
    	    let evt = event.srcElement ? event.srcElement : event.target;
            let file = evt.files; // 获取要上传的文件
            console.log(file, '...file')
            // 用户取消上传
            if(file == undefined || file.length === 0){
                return;
            }
            // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
            self.dynamicStateFrom.uploadType = status
            let ossPath = ''
            if (self.dynamicStateFrom.uploadType === '1' || self.dynamicStateFrom.uploadType === '3' || self.dynamicStateFrom.uploadType === '5' || self.dynamicStateFrom.uploadType === '6') {
                ossPath = 'wx_mp/forum/image'
            }
            if (self.dynamicStateFrom.uploadType === '2' || self.dynamicStateFrom.uploadType === '4') {
                ossPath = 'wx_mp/forum/video'
            }
            if (ossPath) {
                const loading = self.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                for (let i = 0; i < file.length; i++) {
                    // 上传多媒体
                    const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                    console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                    if (self.dynamicStateFrom.uploadType === '1') {
                    // 默认图片
                    self.dynamicStateFrom.defaultImages.push(mainBannerUrl)
                    }
                    if (self.dynamicStateFrom.uploadType === '2') {
                        if (JSON.stringify(self.dynamicStateFrom.defaultVideos) === '[]') {
                            // 默认视频
                            self.dynamicStateFrom.defaultVideos.push({
                                url: mainBannerUrl,
                                cover: ''
                            })
                        } else {
                            self.dynamicStateFrom.defaultVideos[0]["url"] = mainBannerUrl
                            self.dynamicStateFrom.defaultVideos[0]["cover"] = ''
                        }
                    }
                    // if (self.dynamicStateFrom.uploadType === '3') {
                    //     // 图文选项 --- 图片列表
                    //     self.dynamicStateFrom.imageTextOption[index].voteMatterImages.push(mainBannerUrl)
                    // }
                    // if (self.dynamicStateFrom.uploadType === '4') {
                    //     // 视文选项 --- 视频列表
                    //     self.dynamicStateFrom.videoTextOption[index].voteMatterVideos.push({
                    //         url: mainBannerUrl,
                    //         cover: ''
                    //     })
                    // }
                    // if (self.dynamicStateFrom.uploadType === '5') {
                    //     // 图文选项 多媒体对象 视频封面
                    //     self.multimediaCover = mainBannerUrl
                    // }
                    if (self.dynamicStateFrom.uploadType === '6') {
                        self.dynamicStateFrom.defaultVideos[index]["cover"] = mainBannerUrl
                    }
                    if (i === file.length-1) {
                        // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
                        if (self.dynamicStateFrom.uploadType === '1') {
                            self.$refs.imageDefault.value = ''
                        }
                        if (self.dynamicStateFrom.uploadType === '2') {
                            self.$refs.videoDefault.value = ''
                        }
                        // if (self.dynamicStateFrom.uploadType === '3') {
                        //     if (self.$refs.imageText && JSON.stringify(self.$refs.imageText) !== '[]') {
                        //         for (let imageIndex = 0; imageIndex < self.$refs.imageText.length; imageIndex++) {
                        //             self.$refs.imageText[imageIndex].value = ''
                        //         }
                        //     }
                        // }
                        // if (self.dynamicStateFrom.uploadType === '4') {
                        //     if (self.$refs.videoText && JSON.stringify(self.$refs.videoText) !== '[]') {
                        //         for (let videoIndex = 0; videoIndex < self.$refs.videoText.length; videoIndex++) {
                        //             self.$refs.videoText[videoIndex].value = ''
                        //         }
                        //     }
                        // }
                        // if (self.dynamicStateFrom.uploadType === '5') {
                        //     self.$refs.imageCover.value = ''
                        // }
                        if (self.dynamicStateFrom.uploadType === '6') {
                            self.$refs.defaultCover.value = ''
                        }
                        loading.close()
                    }
                }
            }
        },
        // 操作·删除多媒体
        operateDeleteMultimedia(object, index) {
            const self = this;
            object.splice(index, 1)
        },
        // 操作·发布模板
        operatePublishTemplate(formName) {
            const self = this;
            self.$refs[formName].validate((valid) => {
                if (valid) {
                    // 投票类型  1普通动态  2投票动态
                    if (self.dynamicStateFrom.voteType === '1') {
                        // 默认动态类型 0纯文本 1图片 2视频
                        if (self.dynamicStateFrom.defaultMatterType === '0' && !self.dynamicStateFrom.defaultText) {
                            self.$message('少年, 你还没填写动态内容');
                            return
                        }
                        if (self.dynamicStateFrom.defaultMatterType === '1') {
                            if (!self.dynamicStateFrom.defaultImages || JSON.stringify(self.dynamicStateFrom.defaultImages) === '[]') {
                                self.$message('少年, 你还没有上传图片呢');
                                return
                            }
                            // 上传图片最多9张
                            if (self.dynamicStateFrom.defaultImages.length > 9) {
                                self.$message('少年, 上传图片不应超过9张');
                                return
                            }
                        }
                        if (self.dynamicStateFrom.defaultMatterType === '2') {
                            if (!self.dynamicStateFrom.defaultVideos || JSON.stringify(self.dynamicStateFrom.defaultVideos) === '[]') {
                                self.$message('少年, 你还没有上传视频呢');
                                return
                            }
                        }
                    }
                    // if (self.dynamicStateFrom.voteType === '2') {
                    //     // 投票动态类型  1文本 2图文 3视文
                    //     if (self.dynamicStateFrom.voteMatterType === '0') {
                    //         self.$message('少年, 请选择编辑选项 文本、图文 or 视文');
                    //         return
                    //     }
                    //     if (self.dynamicStateFrom.voteMatterType === '1') {
                    //         if (!self.dynamicStateFrom.plainTextOption || JSON.stringify(self.dynamicStateFrom.plainTextOption) === '[]') {
                    //             self.$message('少年, 添加文本投票的选项');
                    //             return
                    //         }
                    //         let plainTextFlag = false
                    //         for (let i = 0; i < self.dynamicStateFrom.plainTextOption.length; i++) {
                    //             if (!self.dynamicStateFrom.plainTextOption[i] || !self.dynamicStateFrom.plainTextOption[i].voteMatterText) {
                    //             self.$message('少年, 添加的选项内容中有空着');
                    //             return
                    //             }
                    //         }
                    //     }
                    //     if (self.dynamicStateFrom.voteMatterType === '2') {
                    //         if (!self.dynamicStateFrom.imageTextOption || JSON.stringify(self.dynamicStateFrom.imageTextOption) === '[]') {
                    //             self.$message('少年, 添加图文投票的选项');
                    //             return
                    //         }
                    //         let imageTextFlag = false
                    //         for (let j = 0; j < self.dynamicStateFrom.imageTextOption.length; j++) {
                    //             if (!self.dynamicStateFrom.imageTextOption[j] || JSON.stringify(self.dynamicStateFrom.imageTextOption[j].voteMatterImages) === '[]') {
                    //             self.$message('少年, 添加的选项内容中有没上传图片的');
                    //             return
                    //             }
                    //         }
                    //     }
                    //     if (self.dynamicStateFrom.voteMatterType === '3') {
                    //         if (!self.dynamicStateFrom.videoTextOption || JSON.stringify(self.dynamicStateFrom.videoTextOption) === '[]') {
                    //             self.$message('少年, 添加视文投票的选项');
                    //             return
                    //         }
                    //         let videoTextFlag = false
                    //         for (let k = 0; k < self.dynamicStateFrom.videoTextOption.length; k++) {
                    //             if (!self.dynamicStateFrom.videoTextOption[k] || JSON.stringify(self.dynamicStateFrom.videoTextOption[k].voteMatterVideos) === '[]') {
                    //             self.$message('少年, 添加的选项内容中有没上传视频');
                    //             return
                    //             }
                    //             // if (!self.dynamicStateFrom.videoTextOption[k].voteMatterVideos)
                    //         }
                    //     }
                    // }
                    if (self.dynamicStateFrom.matterLabel === '4') {
                        self.dynamicStateFrom.matterType = '4' 
                    } else {
                        self.dynamicStateFrom.matterType = '3' 
                    }
                    self.$confirm('少年, 一经发布不可再次修改', '提示', {
                        confirmButtonText: '发布',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(async() => {
                        console.log(self.dynamicStateFrom, '...self.dynamicStateFrom')
                        const appendVoteState = await appendVoteToGather(self.dynamicStateFrom)
                        if (appendVoteState.status === 200) {
                            // // 弹窗 显示
                            // self.dialogOuterVisible = false
                            // // 获取 集合中的投票记录
                            // self.obtainVoteFromGather()
                            self.$emit("operateCloseRecord", {matterType: self.dynamicStateFrom.matterType});
                        } else {
                            self.$message({
                                type: 'info',
                                message: '发布失败'
                            });
                        }
                    }).catch(() => {});
                } else {
                    console.log('表单提交失败!!');
                    return false;
                }
            })
        },
    },
}
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
  @import 'dynamicIssue.less';
</style>
